<template>
	<base-page title="选择经纪人" backgroundColor="white">
		<view class="p-24">
			<view class="flex item-center">
				<image v-if="agentNumState===1" class="w-24 h-24 mr-4" src="@/static/svg/radio-selected.svg"></image>
				<image v-else class="w-24 h-24 mr-4" src="@/static/svg/radio-default.svg" @click="onChange(1)"></image>
				<text class="fs-16 text-bold">所有经纪人可推广</text>
			</view>
			<view class="flex item-center mt-38">
				<image v-if="agentNumState===2" class="w-24 h-24 mr-4" src="@/static/svg/radio-selected.svg"></image>
				<image v-else class="w-24 h-24 mr-4" src="@/static/svg/radio-default.svg" @click="onChange(2)"></image>
				<text class="fs-16 text-bold">部分经纪人可推广</text>
			</view>
			<view v-for="(group, i) in groupList" :key="i" class="mt-16 ml-45">
				<view class="flex item-center">
					<image v-if="isGroupCheck(group)" class="w-16 h-16 mr-4" src="@/static/svg/activity/icon-radio-check-blue.svg" @click="onGroupChange(group, false)"></image>
					<image v-else class="w-16 h-16 mr-4" src="@/static/svg/activity/icon-radio-default.svg" @click="onGroupChange(group, true)"></image>
					<text class="text-color-hint">{{group.groupName}}</text>
				</view>
				<view v-for="(user, j) in group.businessSelectAgents" :key="`${i}-${j}`" class="flex item-center ml-24 mt-12">
					<image v-if="isUserCheck(user)" class="w-16 h-16 mr-4" src="@/static/svg/activity/icon-radio-check-blue.svg" @click="onUserChange(user, false)"></image>
					<image v-else class="w-16 h-16 mr-4" src="@/static/svg/activity/icon-radio-default.svg" @click="onUserChange(user, true)"></image>
					<image class="w-16 h-16 mr-2" style="border-radius:2.667px;" :src="user.avatar"></image>
					<text class="text-color-hint">{{user.nickName}}</text>
				</view>
			</view>
		</view>
		<template #footer>
			<view class="m-12 flex">
				<button class="confirm-btn flex-1 flex center radius-8 h-46 fs-16 bg-primary text-white" @click="submit">确认</button>
			</view>
		</template>
	</base-page>
</template>

<script setup name="ChooseAgent">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, unref, getCurrentInstance, toRaw, } from 'vue'
	import { selectAgentApi } from '@/api/business.js'
	
	const instance = getCurrentInstance()
	
	const agentNumState = ref(1)
	const checkUserIdList = ref([])
	
	const onChange = (type) => {
		agentNumState.value = type
		if (type === 1) {
			checkUserIdList.value = []
		}
	}
	
	const onGroupChange = (group, check) => {
		agentNumState.value = 2
		for (let i = 0; i < group.businessSelectAgents.length; i++) {
			const user = group.businessSelectAgents[i]
			onUserChange(user, check)
		}
	}
	
	const onUserChange = (user, check) => {
		agentNumState.value = 2
		const index = checkUserIdList.value.findIndex(it => it === user.userId)
		if (check) {
			if (index === -1) {
				checkUserIdList.value.push(user.userId)
			}
		} else {
			if (index !== -1) {
				checkUserIdList.value.splice(index, 1)
			}
		}
	}
	
	// 判断是否分组所有人都勾选
	const isGroupCheck = (group) => {
		for (let i = 0; i < group.businessSelectAgents.length; i++) {
			const user = group.businessSelectAgents[i]
			if (!isUserCheck(user)) {
				return false
			}
		}
		return true
	}

	// 判断用户是否勾选
	const isUserCheck = (user) => {
		return checkUserIdList.value.some(it => it === user.userId)
	}
	
	const submit = () => {
		if (agentNumState.value === 2) {
			if (checkUserIdList.value.length === 0) {
				uni.showToast({
					title: '请选择可推广经纪人',
					icon: 'none'
				})
				return
			}
		}
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.emit('onAgentChange', {
			agentNumState: unref(agentNumState),
			selectAgentList: [...checkUserIdList.value],
		})
		uni.navigateBack()
	}
	
	const groupList = ref([])
	const getList = () => {
		selectAgentApi().then(res => {
			groupList.value = res || []
		})
	}
	
	onLoad(() => {
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			console.log('传值', data)
			agentNumState.value = data.agentNumState
			checkUserIdList.value = data.selectAgentList
			getList()
		})
	})
</script>
